<template>
        <div style="width:400px">
    
    <el-form ref="ruleForm" :model="ruleForm"  label-width="100px"   class="demo-ruleForm">
    <el-form-item label="菜单级别">
<el-select v-model="jb" >
  <el-option v-for="(item,index) in menuS" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="菜单名称" prop="MenuName">
<el-input v-model="ruleForm.MenuName"></el-input>
</el-form-item>
<el-form-item label="地址" prop="Url" v-if="kg">
<el-input v-model="ruleForm.Url"></el-input>
</el-form-item>
<el-form-item label="菜单父级" prop="ParentID" v-if="kg">
<el-select  placeholder="请选择菜单父级" v-model="ruleForm.ParentID">
  <el-option v-for="(item,index) in UpdateMenu" :key="index" :label="item.MenuName" :value="item.MenuID" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="图标地址" prop="Icon">
<el-input v-model="ruleForm.Icon"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')" icon="el-icon-s-promotion">立即修改</el-button>
<el-button @click="resetForm('ruleForm')" icon="el-icon-refresh-left">重置</el-button>
</el-form-item>
</el-form>
    </div>
</template>

<script>
export default {
    name:'update',
    data(){
        return {
          
            ruleForm:{
                MenuID:0,
                MenuName:"",
                Url:"",
                ParentID:0,
                Icon:"",
                LastTime:""

            }, kg:false,
            jb:0,
            menu:[],
            menuS:[{id:0,name:"一级菜单"},
                {id:1,name:"二级菜单"}
            ],
            UpdateMenu:[]
        }
    },
    props:['dialogUpdate','data']
    ,
    methods:{
        submitForm(formName) {
            //先验证表单数据
            this.$refs[formName].validate((valid) => {
                if (valid) {
                  console.log(this.ruleForm)
               this.axios({
                method:'put',
                url:'Menus',
                data:this.ruleForm
            }).then(res=>{
                if(res.code>0){
                  this.$emit('update:dialogUpdate',false)
                  this.$emit("gx");
                    this.$message({ type:'success', message:res.msg})

                }else{
                    this.$message({ type:'danger', message:res.msg})
                }
            })
             
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    },
    created(){
   
        this.axios({
    method:"get",
    url:"Menus/Message"
  }).then(res=>{
    this.menu=res.data
   
  })

  console.log(this.data)

    },
    watch:{
        jb(newvalue,oldvalue){
         
         //修改数据的值
     if(newvalue==1){
       this.UpdateMenu=this.menu
       this.ruleForm.ParentID=this.UpdateMenu[0].MenuID;
       this.kg=true;
     }else{
         this.UpdateMenu=this.menu.filter(n=>n.ParentID==0)
         this.ruleForm.ParentID=0;
         this.kg=false;
     }   
     },
     dialogUpdate(newvalue,oldvalue){
            //修改数据的值
           
                     if(this.data.ParentID==0){
    this.ruleForm=this.data;
    this.jb=0;
     this.kg=false
  }else{
    this.ruleForm=this.data;
    this.jb=1;
    this.kg=true
  }
       
     
           
        }

    }
}
</script>

<style scoped>
</style>